﻿@page "/docs/components/dropdown"

<Seo Canonical="/docs/components/dropdown" Title="Blazorise Dropdown component" Description="Learn to use and work with the Blazorise Dropdown components which are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format." />

<DocsPageTitle Path="Components/Dropdown">
    Blazorise Dropdown component
</DocsPageTitle>

<DocsPageLead>
    Dropdowns expose additional content that "drops down" in a menu.
</DocsPageLead>

<DocsPageParagraph>
    Dropdowns are toggleable, contextual overlays for displaying lists of links and actions in a dropdown menu format.
</DocsPageParagraph>

<DocsPageParagraph>
    Dropdowns are designed to work well with menus to provide a list of options the user can select from. However, dropdowns can also be used in lower-level applications (e.g. color picker and select). The API gives you complete control over showing, hiding, and positioning the menu.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Paragraph>
            <Code>Dropdown</Code> the main container.
        </Paragraph>
        <UnorderedList>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>DropdownToggle</Code> the button that toggles the dropdown menu.
                </Paragraph>
            </UnorderedListItem>
            <UnorderedListItem>
                <Paragraph>
                    <Code Tag>DropdownMenu</Code> the container for the dropdown menu. Hidden by default.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>DropdownItem</Code> a clickable item in the dropdown menu.
                        </Paragraph>
                    </UnorderedListItem>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>DropdownDivider</Code> a horizontal line to separate dropdown items.
                        </Paragraph>
                    </UnorderedListItem>
                    <UnorderedListItem>
                        <Paragraph>
                            <Code Tag>DropdownHeader</Code> a non-clickable header in the dropdown menu.
                        </Paragraph>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dropdown">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <DropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DropdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Dropdown checkboxes">
        Set Checkbox to true to render a checkbox by each dropdown item.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <DropdownCheckboxExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DropdownCheckboxExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Split Dropdown">
        Just add another Button to have a split dropdown.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <SplitDropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SplitDropdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Show Menu">
        By default a dropdown toggle will show and hide a dropdown menu without the need to do it manually. In case you need to control the menu programmatically you have to use the Dropdown reference.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <ShowMenuExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ShowMenuExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Scrollable Menu">
        By default the menu will show all items. If you want to add the scrolling to the menu you just need to define the
        menu <Code>MaxMenuHeight</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <DropdownScrollMenuExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DropdownScrollMenuExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Nested submenus">
        By adding a few more Dropdowns you can add extra levels of submenu to your dropdown. You can apply this to the dropdown in a simple button or within the navbar.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <NestedDropdownExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NestedDropdownExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Nested submenus with direction">
        Nested dropdowns with the manual <Code>Direction</Code> is also supported.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <NestedDropdownDirectionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NestedDropdownDirectionExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Best Practices
</DocsPageSubtitle>

<DocsPageUnorderedList>
    <DocsPageUnorderedListItem>
        Dropdown should not be used for navigation. Use tabs for switching between content, or anchor elements for regular navigation.
    </DocsPageUnorderedListItem>
    <DocsPageUnorderedListItem>
        Dropdown is not an input field. Use <Anchor To="docs/components/select">Select</Anchor>, or <Anchor To="docs/components/radio">Radio Button</Anchor> instead.
    </DocsPageUnorderedListItem>
</DocsPageUnorderedList>

<DocsPageSubtitle>
    Functions
</DocsPageSubtitle>

<Table>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
            <TableHeaderCell>Name</TableHeaderCell>
            <TableHeaderCell>Description</TableHeaderCell>
        </TableRow>
    </TableHeader>
    <TableBody>
        <TableRow>
            <TableRowCell><Code>Show()</Code></TableRowCell>
            <TableRowCell>Show the dropdown menu.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell><Code>Hide()</Code></TableRowCell>
            <TableRowCell>Hides the dropdown menu.</TableRowCell>
        </TableRow>
        <TableRow>
            <TableRowCell><Code>Toggle()</Code></TableRowCell>
            <TableRowCell>Switches the visibility of dropdown menu.</TableRowCell>
        </TableRow>
    </TableBody>
</Table>

<ComponentApiDocs ComponentTypes="[typeof(Dropdown), typeof(DropdownMenu),typeof(DropdownItem), typeof(DropdownToggle)]" />


